<template>
  <el-row style="margin-bottom: 12px">
    <el-col :span="18">
      <el-space wrap>
        <el-card v-for="wallet in walletList" body-class="wallet" @click="selectWallet(wallet.id)">
          <el-avatar :src="matchAvatar(wallet.name)"/>
          <el-space fill :size="0">
            <b v-text="wallet.name"/>
            <span v-text=" formatRMB(wallet.money)"/>
          </el-space>
        </el-card>
      </el-space>
    </el-col>
    <el-col :span="6" style="padding: 0 12px">
      <el-form label-position="top">
        <el-form-item label="快速转账">
          <el-select v-model="transfer.a1" placeholder="选择出账账户" clearable>
            <el-option v-for="wallet in walletList"
                       :key="wallet.id"
                       :label="wallet.name"
                       :value="wallet.id"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="transfer.a2" placeholder="选择类型">
            <el-option :key="1" label="站内转账" :value="1"/>
            <el-option :key="2" label="支出" :value="2"/>
            <el-option :key="3" label="收入" :value="3"/>
          </el-select>
        </el-form-item>
        <el-form-item v-if="transfer.a2 === 1">
          <el-select v-model="transfer.a3" placeholder="选择进账账户" clearable>
            <el-option v-for="wallet in walletList"
                       :key="wallet.id"
                       :label="wallet.name"
                       :value="wallet.id"/>
          </el-select>
        </el-form-item>
        <el-form-item v-if="transfer.a2 === 2 || transfer.a2 === 3">
          <el-select v-model="transfer.a3" placeholder="选择类型" clearable>
            <el-option v-for="type in typeList"
                       :key="type.id"
                       :label="type.name"
                       :value="type.id"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="transfer.amount"
                    placeholder="输入金额"
                    type="text"
                    auto-complete="off"/>
        </el-form-item>
        <el-form-item>
          <el-input v-model="transfer.fee"
                    placeholder="输入手续费"
                    type="text"
                    auto-complete="off"/>
        </el-form-item>
        <el-form-item>
          <el-input v-model="transfer.remark"
                    placeholder="输入备注"
                    type="text"
                    auto-complete="off"/>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" class="w100" disabled text bg>提交转账</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
  <log-list :walletId="walletId" :typeList="typeList"/>
</template>

<script>
import walletApi from "@/api/wallet.js";
import logList from "@/components/wallet/logList.vue";
import base from "@/utils/base.js";

export default {
  name: "index",
  mixins: [base],
  components: {logList},
  data() {
    return {
      walletList: [],
      typeList: [],
      transfer: {},
      walletId: "",
    }
  },
  created() {
    this.loadWallet()
    this.loadType()
  },
  methods: {
    loadWallet() {
      walletApi.listForShop().then(res => {
        this.walletList = res.data
      })
    },
    loadType() {
      walletApi.typeList().then(res => this.typeList = res.data)
    },
    selectWallet(walletId) {
      this.walletId = walletId;
    },
    matchAvatar(text) {
      let avatarIcon = ['微信', '支付宝', '现金', '银行卡', '会员卡', 'POS', '专用', '二维码']
      let regex = new RegExp(avatarIcon.join("|"), "gi")
      let [icon] = text.match(regex) || [];
      return `/static/wallet/${icon || '钱袋'}.png`
    },
  }
}
</script>

<style lang="scss" scoped>
.w100 {
  width: 100%;
}
</style>